<template>
    <!-- Carousel Start -->
    <div class="container-fluid p-0">
        <swiper
            class="main-banner"
            :modules="modules"
            :mousewheel="true"
            loop
            effect="fade"
            :pagination="{ dynamicBullets: true, clickable: true }"
            :autoplay="{ delay: 5000 }"
        >
            <swiper-slide class="banner-slide">
                <img class="img-fluid" src="/images/carousel-1.jpg" alt="" />
                <div
                    class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center"
                    style="background: rgba(43, 57, 64, 0.5)"
                >
                    <div class="container">
                        <div class="row justify-content-start">
                            <div class="col-10 col-lg-8">
                                <h1 class="display-3 text-white animated slideInDown mb-4">
                                    科技赋能，聚 <b class="text-warning">人</b> 成势
                                </h1>
                                <p class="fs-4 fw-medium text-white mb-4 pb-2">
                                    猎头与胜任力咨询
                                </p>
                                <router-link
                                    :to="{ path: '/about' }"
                                    class="btn btn-secondary py-md-3 px-md-5 me-3 animated slideInLeft"
                                >
                                    了解更多
                                </router-link>
                            </div>
                        </div>
                    </div>
                </div>
            </swiper-slide>
            <swiper-slide class="banner-slide">
                <div class="position-relative">
                    <img class="img-fluid mx-auto d-block" src="/images/carousel-2.jpg" alt="" />
                    <div
                        class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center"
                        style="background: rgba(43, 57, 64, 0.5)"
                    >
                        <div class="container">
                            <div class="row justify-content-start">
                                <div class="col-12 col-lg-10">
                                    <h1 class="display-3 text-white animated slideInDown mb-4">
                                        专注、迅捷、成就、分享
                                    </h1>
                                    <p class="fs-4 fw-medium text-white mb-4 pb-2">
                                        引领商业进步，共创美好生活
                                    </p>
                                    <router-link
                                        :to="{ path: '/about' }"
                                        class="btn btn-secondary py-md-3 px-md-5 me-3 animated slideInLeft"
                                    >
                                        了解更多
                                    </router-link>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </swiper-slide>
        </swiper>
    </div>
    <!-- Carousel End -->

    <!-- Category Start -->
    <div class="container-xxl py-5">
        <div class="container">
            <h2 class="text-center mb-5 wow fadeInUp" data-wow-delay="0.1s">
                超过10年对行业的研究，专注遴选前沿而富有高成长性领域
            </h2>
            <div class="row g-4">
                <div class="col-lg-3 col-6 wow fadeInUp" data-wow-delay="0.1s">
                    <div class="cat-item rounded p-4">
                        <i class="fa fa-3x fa-shopping-cart text-secondary mb-4"></i>
                        <h6 class="mb-3">电商</h6>
                    </div>
                </div>
                <div class="col-lg-3 col-6 wow fadeInUp" data-wow-delay="0.2s">
                    <div class="cat-item rounded p-4">
                        <i class="far fa-3x fa-grin-alt text-secondary mb-4"></i>
                        <h6 class="mb-3">AI 人工智能</h6>
                    </div>
                </div>
                <div class="col-lg-3 col-6 wow fadeInUp" data-wow-delay="0.3s">
                    <div class="cat-item rounded p-4">
                        <i class="fa fa-3x fa-archive text-secondary mb-4"></i>
                        <h6 class="mb-3">新零售</h6>
                    </div>
                </div>
                <div class="col-lg-3 col-6 wow fadeInUp" data-wow-delay="0.4s">
                    <div class="cat-item rounded p-4">
                        <i class="fa fa-3x fa-mouse-pointer text-secondary mb-4"></i>
                        <h6 class="mb-3">O2O</h6>
                    </div>
                </div>
                <div class="col-lg-3 col-6 wow fadeInUp" data-wow-delay="0.5s">
                    <div class="cat-item rounded p-4">
                        <i class="fa fa-3x fa-city text-secondary mb-4"></i>
                        <h6 class="mb-3">智慧城市</h6>
                    </div>
                </div>
                <div class="col-lg-3 col-6 wow fadeInUp" data-wow-delay="0.6s">
                    <div class="cat-item rounded p-4">
                        <i class="fa fa-3x fa-car text-secondary mb-4"></i>
                        <h6 class="mb-3">无人车</h6>
                    </div>
                </div>
                <div class="col-lg-3 col-6 wow fadeInUp" data-wow-delay="0.7s">
                    <div class="cat-item rounded p-4">
                        <i class="fa fa-3x fa-database text-secondary mb-4"></i>
                        <h6 class="mb-3">大数据</h6>
                    </div>
                </div>
                <div class="col-lg-3 col-6 wow fadeInUp" data-wow-delay="0.8s">
                    <div class="cat-item rounded p-4">
                        <i class="fa fa-3x fa-video text-secondary mb-4"></i>
                        <h6 class="mb-3">视频</h6>
                    </div>
                </div>
                <div class="col-lg-3 col-6 wow fadeInUp" data-wow-delay="0.9s">
                    <div class="cat-item rounded p-4">
                        <i class="fa fa-3x fa-desktop text-secondary mb-4"></i>
                        <h6 class="mb-3">互联网传媒</h6>
                    </div>
                </div>
                <div class="col-lg-3 col-6 wow fadeInUp" data-wow-delay="1s">
                    <div class="cat-item rounded p-4">
                        <i class="fa fa-3x fa-film text-secondary mb-4"></i>
                        <h6 class="mb-3">互联网影业</h6>
                    </div>
                </div>
                <div class="col-lg-3 col-6 wow fadeInUp" data-wow-delay="1.1s">
                    <div class="cat-item rounded p-4">
                        <i class="fa fa-3x fa-hard-hat text-secondary mb-4"></i>
                        <h6 class="mb-3">新制造</h6>
                    </div>
                </div>
                <div class="col-lg-3 col-6 wow fadeInUp" data-wow-delay="1.2s">
                    <div class="cat-item rounded p-4">
                        <i class="fa fa-3x fa-plane text-secondary mb-4"></i>
                        <h6 class="mb-3">出海</h6>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Category End -->

    <!-- About Start -->
    <div class="container-xxl py-5">
        <div class="container">
            <div class="row g-5 align-items-center">
                <div class="col-lg-6 wow fadeIn" data-wow-delay="0.1s">
                    <div class="row g-0 about-bg rounded overflow-hidden">
                        <div class="col-6 text-start">
                            <img class="img-fluid w-100" src="/images/about-1.jpg" />
                        </div>
                        <div class="col-6 text-start">
                            <img
                                class="img-fluid"
                                src="/images/about-2.jpg"
                                style="width: 85%; margin-top: 15%"
                            />
                        </div>
                        <div class="col-6 text-end">
                            <img class="img-fluid" src="/images/about-3.jpg" style="width: 85%" />
                        </div>
                        <div class="col-6 text-end">
                            <img class="img-fluid w-100" src="/images/about-4.jpg" />
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <h2 class="mb-4 wow fadeInUp" data-wow-delay="0.6s">
                        迄今为止，已完成对<b class="text-secondary">100000+</b>
                        优质候选人的推荐
                    </h2>
                    <p class="mb-4 wow fadeInUp" data-wow-delay="0.8s">
                        善于聆听不同的声音 ， 让人选与企业无缝衔接，从而配置最佳组合
                    </p>
                    <h5 class="wow fadeInRight" data-wow-delay="1s">
                        <i class="fa fa-check text-secondary me-3"></i>高管人员
                    </h5>
                    <p class="wow fadeInUp" data-wow-delay="1.2s">
                        首席执行官CEO、首席运营官COO、总裁、副总裁、总经理、副总经理、人事总监、财务总监、销售总监、供应链总监等
                    </p>
                    <h5 class="wow fadeInRight" data-wow-delay="1.2s">
                        <i class="fa fa-check text-secondary me-3"></i>职能类中层管理人员
                    </h5>
                    <p class="wow fadeInUp" data-wow-delay="1.4s">
                        人事经理、财务经理、生产经理、质量经理、环境安全环境经理、供应链管理经理等
                    </p>
                    <h5 class="wow fadeInRight" data-wow-delay="1.4s">
                        <i class="fa fa-check text-secondary me-3"></i>销售市场类中层管理人员
                    </h5>
                    <p class="wow fadeInUp" data-wow-delay="1.6s">
                        区域销售经理、办事处经理、零售经理、渠道经理、市场经理、KA经理、行业销售经理、商务经理等
                    </p>
                    <h5 class="wow fadeInRight" data-wow-delay="1.6s">
                        <i class="fa fa-check text-secondary me-3"></i>
                        产品技术研发类中层管理人员
                    </h5>
                    <p class="wow fadeInUp" data-wow-delay="1.8s">
                        AI算法工程师、Java架构师、PHP研发经理、云平台架构师、开发测试架构师、产品总监、高级产品经理、移动端开发总监、项目经理，前端架构师等
                    </p>
                </div>
            </div>
        </div>
    </div>
    <!-- About End -->

    <!-- Testimonial Start -->
    <div class="container-xxl py-5 wow fadeInUp" data-wow-delay="0.1s">
        <div class="container">
            <h2 class="text-center mb-5">
                与客户、合作伙伴共同成长，优化升级人力配置，推动商业进步
            </h2>
            <p class="text-center fs-5 mb-5">部分合作客户展示</p>

            <swiper
                :slidesPerView="brandRow.slidesPerView"
                :grid="{ rows: brandRow.rows }"
                :spaceBetween="brandRow.spaceBetween"
                loop
                :pagination="{ dynamicBullets: true, clickable: true }"
                :autoplay="{ delay: 5000 }"
                :modules="modules2"
                class="band-box"
            >
                <swiper-slide v-for="brand in brands" class="band-item" :key="brand">
                    <img :src="getPath(`/images/logo/${brand}`)" />
                </swiper-slide>
            </swiper>
        </div>
    </div>
    <!-- Testimonial End -->
</template>

<script setup lang="ts">
    import { computed, ref } from 'vue';
    import { A11y, Autoplay, Pagination, EffectFade, Mousewheel, Grid } from 'swiper/modules';
    import { Swiper, SwiperSlide } from 'swiper/vue';
    import 'swiper/css/bundle';
    import { useWindowSize } from '@vueuse/core';

    const modules = [EffectFade, Pagination, A11y, Autoplay];

    const modules2 = [Grid, Pagination, Mousewheel, Autoplay, EffectFade];

    const brands = ref([
        `tsl.png`,
        `ptg.jpg`,
        `intel.png`,
        `skhynix.jpeg`,
        `zxgj.jpg`,
        `didi.png`,
        `baoneng.png`,
        `yqsl.png`,
        `xiaopeng.png`,
        `byd.png`,
        `xhs.png`,
        `sh.png`,
        `rx.png`,
        `lbyd.png`,
        `36kr.png`,
        `xmly.png`,
        `bk.png`,
        `xm.png`,
        `bgy.png`
    ]);

    const { width } = useWindowSize();

    const brandRow = computed(() => {
        let slidesPerView = 3;
        let spaceBetween = 30;
        let rows = 2;
        if (width.value < 768) {
            slidesPerView = 2;
            spaceBetween = 10;
            rows = 2;
        } else if (width.value < 992) {
            slidesPerView = 3;
            rows = 3;
            spaceBetween = 10;
        } else {
            slidesPerView = 3;
            spaceBetween = 30;
            rows = 2;
        }
        return { slidesPerView, spaceBetween, rows };
    });

    const baseUrl = import.meta.env.VITE_APP_CONTEXT_PATH;

    const getPath = (path: string) => {
        return baseUrl + path;
    };
</script>

<style>
    .banner-slide img {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 50vh;
        object-fit: cover;
    }

    .band-box {
        height: 400px;
    }
    .band-item {
        font-size: 18px;
        background: #fff;
        /* Center slide text vertically */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .band-item img {
        max-width: 100%;
        max-height: 100%;
    }
</style>
